import React, { useContext } from 'react';
import { TabItemProps } from './interface';
import classNames from 'classnames';
import { TabsContext } from './tabs';

const TabItem: React.FC<TabItemProps> = (props) => {

  const { label, index, disabled, className, style, children } = props;

  const { index: activeIndex, onSelect } = useContext(TabsContext);

  const classes = classNames('kd-tab-item', className, {
    'is-active': index === activeIndex,
    'is-disabled': disabled,
  })

  function handleSelect() {
    if (onSelect && index && !disabled) {
      onSelect(index);
    }
  }

  return (
    <li className={classes} style={style}>
      <div className="kd-tab-label" onClick={handleSelect}>
        {label}
      </div>
      {/* <div className='kd-tab-content'>
        {children}
      </div> */}
    </li>
  );
};

export default TabItem;